

Ext.require([
    'Ext.window.*',
    'Ext.grid.*',
    'Ext.data.*',
    'Ext.util.*',
    'Ext.ModelManager',
    'Ext.tip.*',


]);


Ext.onReady(function(){
    Ext.tip.QuickTipManager.init();

	Ext.define('Usuarios', {
		extend: 'Ext.data.Model',
		fields: [{
			name: 'id',
			type: 'int'
		},{
			name: 'first'
		}, {
			name: 'last'
		}, {
			name: 'email'
		}]
	});

    // create the Data Store
    var store = Ext.create('Ext.data.JsonStore', {
        // store configs
        autoDestroy: true,
        model: 'Usuarios',
        proxy: {
            type: 'ajax',
            url: 'paging.json',
            reader: {
                type: 'json',
                root: 'data',
                idProperty: 'id',

            }
        },
        remoteSort: false,
        sorters: [{
            property: 'id',
            direction: 'ASC'
        }],
        pageSize: 50
    });
    
   store.load();

    var grid = Ext.create('Ext.grid.Panel', {
        width: 600,
        height: 200,
        renderTo: 'topic-grid'
        title: 'ExtJS.com - Browse Forums',
        store: store,
        // grid columns
        columns:[{
            dataIndex: 'id',
            text: 'Id',
            // instead of specifying filter config just specify filterable=true
            // to use store's field's type property (if type property not
            // explicitly specified in store config it will be 'auto' which
            // GridFilters will assume to be 'StringFilter'
            filterable: true,
            width: 30
            //,filter: {type: 'numeric'}
        }, {
            dataIndex: 'first',
            text: 'first',
            id: 'first',
            flex: 1,
            filter: {
                type: 'string'
                // specify disabled to disable the filter menu
                //, disabled: true
            }
        }, {
            dataIndex: 'last',
            text: 'last',
            id: 'last',
            flex: 1,
            filter: {
                type: 'string'
                // specify disabled to disable the filter menu
                //, disabled: true
            }
        }, {
            dataIndex: 'email',
            text: 'E-mail',
            id: 'email',
          
            width: 180,
            filter: {
                type: 'string'
                // specify disabled to disable the filter menu
                //, disabled: true
            }
        }],

    });


  /*  
    
        var win,
    button = Ext.get('show-btn3');

    button.on('click', function(){
		
		 if (!win) {
            win = Ext.create('widget.window', {
        height: 400,
        width: 610,
        x: 400,
        y: 200,
        title: 'Constraining Window, plain: true',
        closable: true,
        plain: true,
        layout: 'fit',
        items: [floater = Ext.create('Ext.Component', {
            xtype: 'component',
            floating: {
                shadow: false
            },
            height: 50,
            width: 50,
            x: 175,
            y: 75
        }),grid,{
            border: false
        }]
    });
        }
        button.dom.disabled = true;
        if (win.isVisible()) {
            win.hide(this, function() {
                button.dom.disabled = false;
            });
        } else {
            win.show(this, function() {
                button.dom.disabled = false;
            });
        }
    });*/
    
    
});

